<template>
  <div class="memo-wrap">
    <div style="height: 60px;text-align: left;padding:10px 20px">
      id: <el-input v-model="searchData.id" placeholder="请输入内容"></el-input>
      用户名： <el-input v-model="searchData.name" placeholder="请输入内容"></el-input>
      <el-button type="primary" @click.native.prevent="searchUser()">查询</el-button>
      <el-button @click.native.prevent="reset()">重置</el-button>
      <el-button type="primary" style="float:right;">添加用户</el-button>
    </div>
    <el-table
      :data="tableData.data"
      class="el-table"
      style="background-color: #283046;"
      :key="Math.random()"
      height="calc(100% - 125px)">
      <el-table-column
        prop="id"
        label="id"
        width="150">
      </el-table-column>
      <el-table-column
        prop="name"
        label="用户名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="pass"
        label="密码"
        width="120">
      </el-table-column>
      <el-table-column
        prop="roleType"
        label="角色">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="resetPass(scope.$index, tableData.data[scope.$index])"
            type="text"
            size="small">
            重置密码
          </el-button>
          <el-button
            @click.native.prevent="deleteUser(scope.$index, tableData.data[scope.$index])"
            type="text"
            size="small">
            删除用户
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="float:right;margin-top: 5px;background: #283046;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="tableData.page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.data.length">
    </el-pagination>
  </div>
</template>

<script>
import {getUserList, deleteUser, resetUserPass} from '@/assets/data/userData'
export default {
  name: 'memo',
  props: {
  },
  components: {
  },
  data () {
    return {
      searchData: {
        id: '',
        name: ''
      },
      tableData: {
        page: 1,
        pageSize: 10
      },
      isRouterAlive: true,
      clickSearch: null
    }
  },
  methods: {
    resetPass (index, rows) {
      resetUserPass(rows.id)
      this.reload(this.clickSearch)
    },
    deleteUser (index, rows) {
      console.log(rows)
      deleteUser(rows.id)
      this.reload(this.clickSearch)
    },
    reload (searchData) {
      if (searchData.id === '' && searchData.name === '') {
        this.tableData = getUserList(this.tableData.page, this.tableData.pageSize, null)
      } else {
        this.tableData = getUserList(this.tableData.page, this.tableData.pageSize, searchData)
      }
    },
    searchUser () {
      this.clickSearch = this.searchData
      this.reload(this.searchData)
    },
    reset () {
      this.searchData.id = ''
      this.searchData.name = ''
      this.reload(this.searchData)
    },
    handleSizeChange () {},
    handleCurrentChange () {}
  },
  created () {
    this.tableData = getUserList(this.tableData.page, this.tableData.pageSize, null)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.memo-wrap{
  background-color: #283046;
  height: 100%;
  border-radius: 6px;
}
.el-table{
  width: 100%;
  border-radius: 6px;
}
.el-input{
  width: 150px;
  display: inline-block;
  margin: 0 10px;
}
.el-input input{
  background-color: #283046;
  color: #fff;
}

/*>>> .el-table__fixed-right-patch {*/
/*  position: absolute;*/
/*  top: -1px;*/
/*  right: 0;*/
/*  background-color: #283046;*/
/*}*/
</style>
